<template>
  <div>
    <a-icon type="file-image" class="icon w-pointer" @click="$refs.WImgModal.show()"/>
    <w-modal ref="WImgModal" title="图片上传" @ok="imageUpClick">
      <div class="image-up-pop-content">
        <w-image-up ref="IMAGE_UP" :souce-url="popImgUrl" class="image-up" />
        <w-copy-text v-if="popImgUrl" class="up-image-url" :text="popImgUrl">
          {{ popImgUrl }}
        </w-copy-text>
      </div>
    </w-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import WModal, { ModalComType } from '@/components/global/modal'
import WImageUp, { OssImageUpType } from '@/components/global/imageUp/oss'
import '@/icons/copy'

@Component({
  components: {
    WImageUp,
    WModal
  }
})
export default class UpToUrl extends Vue {
  popImgUrl = ''

  /**
   * 图片上传按钮点击
   * @returns {Promise<void>}
   */
  imageUpClick () {
    (this.$refs.WImgModal as ModalComType).showLoading();
    (this.$refs.IMAGE_UP as OssImageUpType).upImage()
      .then((data) => {
        this.popImgUrl = data
      })
      .finally(() => {
        (this.$refs.WImgModal as ModalComType).hideLoading()
      })
  }
}
</script>

<style scoped lang="less">
.image-up-pop-content {
  position: relative;
  height: 200px;

  > .image-up {
    position: absolute;
    left: 0;
    top: 0;
  }

  .icon {
    color: #999;
    margin-bottom: 7px;
    font-size: 20px;
  }

  > .up-image-url {
    background-color: #eee;
    border-radius: 3px;
    margin: 0 0 0 200px;
    box-sizing: border-box;
    padding: 10px;
    word-wrap: break-word;
    line-height: 22px;
    color: #999;
    height: 200px;
    > .copy-icon {
      position: absolute;
      right: 5px;
      bottom: 5px;
    }
  }
}
</style>
